<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>permanent </title>
    <link rel="stylesheet" href="./CSS/all.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>万年历</h1>
        </div>
        <div class="search">
            <select class="selectMethod">
                <option checked>选择你的请求方式</option>
                <option value="axios">axios</option>
                <option value="jq">ajax</option>
                <option value="js">原生ajax</option>
            </select>
        </div>

        <div class="card">
            <div class="card-head">
                <h1 class="card-head-h1">公历年：2020年</h1>
                <h2 class="card-head-h2">农历年：庚子</h2>
                <h3 class="card-head-h3">公历日:8日</h3>
            </div>
            <div class="card-body">
                <p class="first"><span>日份_宜</span>
                    <span class="inner">纳采、嫁娶、开市、赴任、恩赦、塞穴、祈福、祭祀、立券、纳财、筑堤</span>
                </p>
                <p class="second"><span>日份_忌</span>
                    <span class="inner">针灸、解除、求医、入宅、分居、设醮、鸣鼓、出行、动土、移徙、竖柱、盖屋</span>
                </p>
                <p class="third"><span>星宿_诗词</span>
                    <span class="inner">壁星造作主增财，丝蚕大熟福滔天，奴婢自来人口进，开门放水出英贤，埋葬招财官品进，家中诸事乐陶然，婚姻吉利主贵子早播名誉著祖鞭</span>
                </p>
            </div>
        </div>

    </div>


    <script type="module">
        import * as method from './JS/everyMethod.js'


        window.onload = function () {
            let date = method.wannianGetDate()
            console.log(date)
            let url = `http://icalendar.market.alicloudapi.com/ai_metaphysics/calendar/elite?STRING=${date}`
            console.log(url)
            method.xmlFindJq('GET', url, jqXhrGetData)
            $('select').change(function (e) {
                let value = e.target.value
                console.log(e.target.value)
                if (value == 'jq') {
                    method.xmlFindJq('GET', url, jqXhrGetData)
                } else if (value == 'axios') {
                    method.axiosFind()
                } else if (value == 'js') {
                    method.xmlFindJs()
                }
            })
            function axiosGetData(response) {

                execudateData(response.艾科瑞特_老黄历)
            }
            function jqXhrGetData(response) {
                execudateData(response.艾科瑞特_老黄历)
            }
            function jsXhrGetData(response) {
                execudateData(response.艾科瑞特_老黄历)
            }

            function execudateData(response) {
                console.log(response)
                $('.card-head-h1').text(response.年份.公历年)
                $('.card-head-h2').text(response.年份.农历年)
                let everDat = response.日份
                $('.card-head-h3').text(everDat.公历日)
                let data1 = everDat.日份_宜
                let data2 = everDat.日份_忌
                let data3 = everDat.星宿_诗词
                $('.first .inner').text(data1)
                $('.second .inner').text(data2)
                $('.third .inner').text(data3)
            }

        }


    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
            outline: none;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background: #353535;
        }

        * {
            margin: 0;
            padding: 0;
            outline: none;
            box-sizing: border-box;
        }


        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            /* background: linear-gradient(-135deg,#c850c0,#4158d0); */
        }

        .wrapper {
            width: 350px;
            background-color: #fff;
            padding: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            margin: 0 auto;
            margin-bottom: 20px;
        }

        .wrapper .input-data {
            width: 100%;
            height: 40px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .wrapper .input-data input {
            width: 100%;
            height: 100%;
            border: none;
            border-bottom: 2px solid silver;
            font-size: 17px;
        }

        .input-data input:focus~label,
        .input-data input:valid~label {
            transform: translateY(-20px);
            font-size: 15px;
            color: #4158D0;
        }

        .wrapper .input-data label {
            position: absolute;
            bottom: 10px;
            left: 0;
            color: grey;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .wrapper .input-data .underline {
            position: absolute;
            bottom: 0px;
            height: 2px;
            width: 100%;
        }

        .input-data .underline:before {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            background: #4158D0;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .input-data input:focus~.underline:before,
        .input-data input:valid~.underline:before {
            transform: scaleX(1);
        }


        .card {
            /* position: relative; */
            width: 400px;
            margin: 0 auto;
            border-radius: 25px;
            box-shadow: -11px 11px 1px rgba(0, 0, 0, 0.3);
            position: relative;
            margin-bottom: 20px;
        }

        .card-after::after {
            content: '';
            display: inline-block;
            width: 100%;
            height: 20px;
            background-size: 20px;
            background-image: url(./Image/向下.png);
            background-repeat: no-repeat;
            background-position: center;
            position: absolute;
            bottom: 0px;
            /* top: 0; */
            /* bottom: 0px; */
            /* left: 0px; */
            /* right: 0; */
        }

        .card-head {

            position: relative;
            height: 120px;
            background: linear-gradient(135deg, #b9ff6f 8%, #05680f 83%);
            /* W3C, IE10+, FF16+, Chrome26+, Opergb(120, 191, 252)Safari7+ */
            border-radius: 25px 25px 0 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;

        }

        .card-head h1 {

            width: 100%;
            height: 20px;
            text-align: center;
            margin-top: 20px;
            font-size: auto;

        }

        .card-head img {

            width: 40px;
            height: 40px;
        }

        .card-logo {
            width: 55px;
            margin: 20px;
        }

        .product-img {
            position: absolute;
            left: 0;
            margin-top: -16px;
            margin-left: 50px;
        }

        .product-detail {
            padding: 0 20px;
            font-size: 11px;
            color: #fff;
        }

        .product-detail h2 {
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 2px;
            padding-bottom: 10px;
            text-transform: uppercase;
        }

        .back-text {
            display: inline-block;
            font-size: 125px;
            font-weight: 900;
            margin-left: -7px;
            margin-top: -12px;
            opacity: 0.1;
        }

        .card-body {
            height: 300px;
            background: #fff;
            border-radius: 0 0 25px 25px;
            overflow: hidden;
        }


        .card-body p {
            width: 90%;
            height: auto;
            margin: 0 auto;
            margin-bottom: 10px;
            font-weight: 1000;
            font-size: 10px;
            line-height: 30px;

        }

        .product-title {
            padding: 20px 20px 5px 20px;
            display: block;
            font-size: 17px;
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .product-title b {
            font-weight: 900;
            letter-spacing: 0px;
        }

        .badge {
            position: relative;
            font-size: 10px;
            font-weight: 300;
            color: #fff;
            background: #11e95b;
            padding: 2px 5px;
            border-radius: 4px;
            top: -2px;
            margin-left: 5px;
        }

        .product-caption {
            display: block;
            padding: 0 20px;
            font-size: 10px;
            font-weight: 400;
            text-transform: uppercase;
        }

        .product-rating {
            padding: 0 20px;
            font-size: 11px;
        }

        .product-rating i.grey {
            color: #acacab;
        }

        .product-size h4 {
            font-size: 11px;
            padding: 0 21px;
            margin-top: 15px;
            padding-bottom: 10px;
            text-transform: uppercase;
        }

        .ul-size {
            margin-left: 15px;
        }

        .ul-size li {
            list-style: none;
            float: left;
            margin-right: 20px;
        }

        .ul-size li a {
            display: inline-block;
            text-decoration: none;
            font-size: 11px;
            width: 22px;
            height: 22px;
            border-radius: 100%;
            text-align: center;
            line-height: 23px;
            color: #000;
        }

        .ul-size li a.active {
            background: #f35e3d;
            color: #fff;
        }

        .product-size:before,
        .product-size:after {
            content: '';
            display: block;
            clear: both;
        }

        .product-color h4 {
            font-size: 11px;
            padding: 0 21px;
            margin-top: 20px;
            padding-bottom: 20px;
            text-transform: uppercase;
        }

        .ul-color {
            margin-left: 27px;
        }

        .ul-color li {
            list-style: none;
            float: left;
            margin-right: 20px;
        }

        .ul-color li img {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 100%;
        }

        .ul-color-li-img-add {
            border: .5px solid orangered;
        }

        .ul-color li a.orange {
            background: #f35e3d;
        }

        .ul-color li a.green {
            background: #11e95b;
        }

        .ul-color li a.yellow {
            background: #ffd414;
        }

        .ul-color li a.active:after {
            position: absolute;
            content: '';
            display: inline-block;
            border: 1px solid #f35e3d;
            width: 24px;
            height: 24px;
            border-radius: 100%;
            margin-left: -5px;
            margin-top: -5px;
        }

        .product-price {
            position: absolute;
            background: #11e95b;
            padding: 7px 20px;
            text-align: center;
            display: inline-block;
            font-size: 24px;
            font-weight: 200;
            color: #fff;
            border-radius: 7px;
            margin-top: -13px;
            margin-left: -5px;
            box-shadow: -10px 20px 15px -10px rgba(17, 233, 91, 0.3);
        }

        .product-price b {
            margin-left: 5px;
        }



        .yt {
            position: fixed;
            padding: 7px 10px 3px 10px;
            top: 5px;
            right: 5px;
            background: rgba(0, 0, 0, 0.1);
        }

        .yt:hover {
            background: rgba(0, 0, 0, 0.2);
        }
    </style>

</body>

</html>